<template>
    <div class="parent">
        <div v-for="(item, index) in num" :key="item" class="child child-box">
            <span>{{ `元素${index + 1}` }}</span>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const num = ref(12)
</script>
<style scoped lang='scss'>
.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr 2fr);
    gap: 12px;
    .child {
        background-color: aqua;
        display: grid;
        place-content: center;
    }
}
</style>